<template>
    <div class="dh_template">
        <!--  v-if="pageingstate != 3" -->
        <div class="dh_s-content" v-if="pageingstate != 3 && pageingstate != 4">
            <!-- 查询 -->
            <div class="dh_s-c-inquire">

                <el-form :model="kindinquire" :rules="rules" ref="kindinquire" :inline="true" label-width="80px" class="dh_sci-form mb10 pl10 pr10">
                    <el-form-item label="查询项" class="mt20 mb20">
                        <el-select v-model="kindinquire.select" @change="resetForm('kindinquire')">
                            <el-option label="模板名称" value="name"></el-option>
                            <el-option label="类别查询" value="kindAllid"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="模板名称" v-if="kindinquire.select === 'name'" class="mt20 mb20" prop="name">
                        <el-input v-model="kindinquire.name" placeholder="请输入查询模板名称"></el-input>
                    </el-form-item>

                    <el-form-item label="类别查询" class="mt20 mb20" v-else prop="kindAllid">
                        <el-select v-model="kindinquire.kindAllid" placeholder="请选择查询的大类">
                            <el-option v-for="(item,key) in kindselect" :key='key' :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="mt20 mb20">
                        <el-button type="primary" @click="seektrade('kindinquire')" class="p10 f18">查询</el-button>
                        <el-button type="danger" @click="requesttemplate();for(var r in kindinquire) r != 'select' ? kindinquire[r] = '' : ''" class="p10 f18">取消查询</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <!-- 列表数据 -->
            <div class="dh_s-c-list">
                <div class="bb1 mb10 pb10">
                    <button type="button" @click="requesttemplate" v-if="pageingstate === 1" class="pt5 pr10 pb5 pl10 br5 wh bc4a"><i class="el-icon-arrow-left"></i>返回</button>
                    <button type="button" @click="pageingstate=3;for(var q in tempform)q === 'arrname' ? tempform[q] = [] : tempform[q] = ''" class="pt5 pr10 pb5 pl10 br5 wh bc4a">添加模板</button>
                </div>
                <table class="dh_scl-table tc f14">
                    <thead>
                        <tr v-if="pageingstate === 1">
                            <th>模板小类ID</th>
                            <th>模板ID</th>
                            <th>小类ID</th>
                            <th>中文名称</th>
                            <th>英文名称</th>
                            <th>操作</th>
                        </tr>
                        <tr v-else>
                            <th>模板ID</th>
                            <th>模板名称</th>
                            <th>模板描述</th>
                            <th>模板的小类</th>
                            <th>大类</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <!-- 模板小类 -->
                    <tbody v-if="pageingstate === 1">
                        <tr v-for="(items,keys) in templist" :key="keys">
                            <td>{{items.id}}</td>
                            <td>{{items.templateid}}</td>
                            <td>{{items.kindAllid}}</td>
                            <td>{{items.name}}</td>
                            <td>{{items.namee}}</td>
                            <td>
                                <!-- <button type="button" @click="outerVisible=true;for(var i in tempupdata)tempupdata[i]=items[i];tempupdata.key=keys" class="wh p10 br5 bc4a">修改</button> -->
                                <button type="button" @click="templatedelete(items.id,keys)" class="wh p10 br5 bcfd">删除</button>
                            </td>
                        </tr>
                    </tbody>
                    <!-- 模板 -->
                    <tbody v-else>
                        <tr v-for="(item,key) in templist" :key="key">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.description}}</td>
                            <td>
                                <!-- <span class="show"><span v-for="(items,keys) in item.classify" :key="keys">{{items.name}}、</span></span> -->
                                <span @click="smallrequest(item.id)"><a href="#">查看</a></span>
                            </td>
                            <td>{{item.kindAllid | kindfilter}}</td>
                            <td>
                                <!-- 之前弹出层的写法留着备用;outerVisible=true;for(var i in tempupdata)tempupdata[i]=item[i];tempupdata.key=key -->
                                <button type="button" @click="templateupdata(item,key)" class="wh p10 br5 bc4a">修改</button>
                                <button type="button" @click="staffdelete(item.id,key)" class="wh p10 br5 bcfd">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- 分页 -->
                <div class="dh_scl-block bt1 bcwh">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    class=" pt5 pr10 pb5 pl10">
                    </el-pagination>
                </div>
            </div>

            <!-- <el-dialog title="修改模板" width="35%" top="13%" :center="true" :visible.sync="outerVisible">

                <p class="tc ff53 mb10">*默认值对应的是原始数据，不填写视为不修改</p>
                <el-form :model="tempupdata" class="dialog-form" label-width="70px">
                    <el-form-item label="中文名称">
                        <el-input type="name" v-model="tempupdata.name" placeholder="请输入新的模板名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称">
                        <el-input v-model="tempupdata.namee" placeholder="请输入新的描述" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible = false">取消</el-button>
                    <el-button type="primary" @click="updatastaff">提交</el-button>
                </div>
            </el-dialog> -->

        </div>

        <div v-else class="bcwh">
            <div class="bb1 p10">
                <button type="button" @click="pageingstate = 0" class="wh p5 br5 f14 bc4a mr10">返回列表</button>
                添加分类<span class="f14 b00a ml10">*大分类每次只能添加一个，小分类一次能添加多个(需要对应的大分类名称进行添加）</span>
            </div>
            <div class="p10">
                <el-form :model="tempform" ref="tempform" :rules="rules" label-width="80px">
                    <el-form-item label="类别查询" class="mt20 mb20">
                        <el-radio @change="option" v-model="tempform.kindAllid" v-for="(item,key) in kindselect" :key='key' :disabled="pageingstate===4 ? true : false" :label="item.id">{{item.name}}</el-radio>
                    </el-form-item>

                    <el-form-item v-if="tempform.kindAllid !== ''" label="选择小类">
                        <div>已选:
                            <span class="wh bgb3 pt2 pb2 pl5 br5 f12 mr5" v-for="(item,key) in tempform.arrname" :key="key">
                                {{item.name}}<span @click="cancel(item,key)"><i class="el-icon-close"></i></span>
                            </span>
                        </div>
                        <div class="add-list bor1 br5">
                            <div class="add-list-titel bb1">
                                <div class="a-l-t-input ml10"><el-input size="mini" placeholder="请输入内容" v-model="input1"></el-input></div>
                                <button class="bc4a br5 wh p5" type="button" @click="seekclassify">搜索</button>
                            </div>
                            <div><span @click="pitchon(item,key)" class="wh bgb3 p5 br5 f12 ml5 mr5" v-for="(item,key) in addarr" :key="key">{{item.name}}</span></div>
                            <div class='bt1'><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="total, prev, pager, next, jumper" :total="total3"></el-pagination></div>
                        </div>
                    </el-form-item>

                    <el-form-item label="模板名称" prop="name">
                       <el-col :span="7"><el-input v-model="tempform.name" placeholder="新增分类名称"></el-input></el-col>
                    </el-form-item>
                    <el-form-item label="模板描述" prop="description">
                       <el-col :span="7"><el-input type="textarea" v-model="tempform.description" placeholder="详细的模板描述..."></el-input></el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-if="pageingstate===3" @click="addtemp('tempform')">提交</el-button>
                        <el-button type="primary" v-else @click="updatatemp('tempform')">修改</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>

    </div>
</template>

<script>
const axios = require('axios');
let that
export default {
    components: {},
    data() {
        return {
            token: '',
            templist: [],
            kindselect: [],                    //做类别名过滤用的
            // 查询的绑定值
            kindinquire:{
                select: 'name',
                name: '',
                kindAllid: ''
            },
            // 添加模板的form表单绑定值
            tempform: {
                kindAllid:'',
                name:'',
                description:'',
                arrname:[]
            },
            // 添加的列表
            addarr:[],
            // 添加员工的表单验证
            rules:{
                name:[
                    { required: true, message: '请输模板名称', trigger: 'blur' },
                ],
                kindAllid:[
                    {required: true, message: '请选择需要查询的大类', trigger: 'change'}
                ],
                description:[
                    {required: true, message: '请输入模板的描述', trigger: 'blur'}
                ]
            },
            // 修改模板用的
            tempupdata:{
                id: '',
                kindAllid: '',
                name: '',
                namee:''
            },
            subclass:[],
            input1:'',
            outerVisible: false,
            innerVisible: false,
            pageingstate: 0,                   //彩笔使用的分页状态管理（区分数据运行）
            currentPage: 1,					   //分页的默认页数
            currentPage3: 1,
            pagesize: 10,                      //单页条数
            total: 0,						   //总条数
            total3: 0
        };
    },
    filters: {
        kindfilter(kindAllid){
            that.kindselect.filter((item) => {
                if(item.id === kindAllid){
                    kindAllid = item.name;
                }
            })
            return kindAllid
        }
    },
    computed: {},
    watch: {},
    methods: {
        requesttemplate(){
            let that = this;
            that.pageingstate === 0 ? that.currentPage = 1 : '';
            let data = {current:that.currentPage,size:that.pagesize};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/template/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                // console.log(resp)
                // let denot = JSON.parse(JSON.stringify(resp.data.data))
                that.templist = resp.data.data;
                that.total = resp.data.code;
                that.pageingstate = 0
            }).catch( err=> {})
        },

        // 添加模板不是添加小类，只需要选择相对应的
        async addtemp(form){
            let data,api,num,i=0;
            this.$refs[form].validate((valid) => {
                if (valid) {i = 0} else {i=2}
            });
            for(i;i<2;i++){
                if(i===0){
                    data = {kindAllid:that.tempform.kindAllid,name:that.tempform.name,description:that.tempform.description};
                    api = '/api/template/add'
                }else{
                    that.tempform.arrname.forEach(item=>{
                        item.kindAllid
                    })
                    data = that.tempform.arrname;
                    api = '/api/templateKind/batchAdd'
                }
                let updata = JSON.stringify(data)
                // console.log(updata)
                await axios({
                    method: 'post',
                    url: api,
                    headers:{
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    if(i===0){
                        that.tempform.arrname.forEach(item=>{
                            item.templateid = resp.data.data
                        })
                        data.id=resp.data.data
                        that.templist.push(data)
                    }else{        
                        for(var q in that.tempform)
                        q === 'arrname' ? that.tempform[q] = [] : that.tempform[q] = '';
                        that.pageingstate = 0;
                    }
                }).catch( err=> {})
            }
        },

        // 添加和更新分来的用两个方法上传，好弄点，看起来也清楚
        async updatatemp(form){
            let data,api,num,i=0;
            this.$refs[form].validate((valid) => {
                if (valid) {i = 0} else {i=2}
            });
            for(i;i<2;i++){
                if(i===0){
                    data = {
                        id:that.tempform.id,
                        kindAllid:that.tempform.kindAllid,
                        name:that.tempform.name,
                        description:that.tempform.description
                    };
                    api = '/api/template/update'
                }else{
                    // 去掉自带的小类
                    let arrdata = new Array();
                    that.tempform.arrname.forEach(item=>{
                        item.templateid = that.tempform.id
                    });
                    arrdata = that.tempform.arrname.filter(item=>{
                        return item.namee !== false
                    })
                    data = arrdata
                    api = '/api/templateKind/batchAdd'
                }
                let updata = JSON.stringify(data)
                // console.log(updata)
                await axios({
                    method: 'post',
                    url: api,
                    headers:{
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    if(i===0){
                        for(var t in that.templist[that.tempform.key]){
                            that.templist[that.tempform.key][t] = data[t]
                        }
                    }else{      
                        for(var q in that.tempform)
                        q === 'arrname' ? that.tempform[q] = [] : that.tempform[q] = '';
                        that.pageingstate = 0;
                    }
                }).catch( err=> {})
            }
        },

        // 修改模板
        async templateupdata(item,key){
            for(var o in that.tempform){
                if(o !== 'arrname' || o !== "kindAllid"){
                    that.tempform[o] = item[o]
                }else{
                    // console.log(item.kindAllid)
                    that.tempform.kindAllid = Number(item.kindAllid);
                }
            }
            that.tempform.id = item.id;
            that.tempform.key = key
            // console.log(that.tempform)
            let total = 10,select;
            for(var i=0;i<2;i++){
                let data = {current:1,size:total,templateid:item.id};
                let updata = JSON.stringify(data);
                // console.log(updata)
                await axios({
                    method: 'post',
                    url: '/api/templateKind/list',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    if(i === 0){
                        resp.data.code <= 10 ? (
                            that.tempform.arrname = resp.data.data.map((item)=>{
                                return {
                                    name: item['name'],
                                    namee: false
                                }
                            }),i=2) : total = resp.data.code;
                    }else{
                        that.tempform.arrname = resp.data.data.map((item)=>{
                            return {
                                name: item['name'],
                                namee: false
                            }
                        })
                    }
                }).catch( err=> {})
            }
            that.pageingstate = 4;
            // console.log(that.tempform.arrname)
        },

        // 选框勾选显示的小类
        option(){
            // console.log(that.tempform.kindAllid)
            let data = {current:that.currentPage3,size:20,topid:that.tempform.kindAllid};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/kindAll/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                // console.log(resp)
                if(resp.data.data.length !== 0){
                    that.total3 = resp.data.code;
                    that.addarr = resp.data.data.map((item)=>{
                        return {
                            name: item['name'],
                            kindAllid: item['id'],
                            namee: item['namee']
                        }
                    })
                }else{
                    that.addarr = [];
                    that.total3 = 0;
                    this.$message('本页暂无数据')
                }
            }).catch( err=> {})
        },

        // 搜索分类
        seekclassify(){
            // let data = {}
            // console.log(that.input1)
            let data = {current:1,size:10,name:that.input1};
            let updata = JSON.stringify(data)
            axios({
                method: 'post',
                url: '/api/kindAll/list',
                headers:{
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                // console.log(resp)
                let transform = resp.data.data.map((item)=>{
                    return {
                        name: item['name'],
                        kindAllid: item['id'],
                        namee: item['namee'],
                    }
                })
                // console.log(transform)
                if(resp.data.data.length!== 0){

                    this.$message({
                        showClose: true,
                        message: '搜索到'+resp.data.data[0].name+'相关数据',
                        type: 'success'
                    })

                    this.$confirm('是否添加该小类?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // that.tempform.arrname.push(transform[0])
                        that.tempform.arrname.find(fruit => fruit.name === transform[0].name) === undefined ? (
                            that.tempform.arrname.push(transform[0]),
                            this.$message({type: 'success',message: '添加成功!'})
                        ) : (
                            this.$message.error('已选择的分类不能重复添加')
                        );
                        // this.$message({
                        //     type: 'success',
                        //     message: '添加成功!'
                        // });
                        // console.log(that.tempform.arrname)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消添加'
                        });          
                    });
                }else{
                    this.$message.error('不存该校小类');
                }
                
            }).catch( err=> {})
        },

        // 小类的选中和取消的效果
        cancel(item,key){
            that.tempform.arrname.splice(key,1)
            that.addarr.find(fruit => fruit.name === item.name) === undefined ? (that.addarr.push(item)) : '';
        },

        pitchon(item,key){
            that.tempform.arrname.find(fruit => fruit.name === item.name) === undefined ? (that.tempform.arrname.push(item),that.addarr.splice(key,1)) : this.$message.error('已选择的分类不能重复添加');
            // console.log(that.tempform.arrname.find(fruit => fruit.name === item.name)) 
        },

        // 分页的函数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            let that = this;
            if(that.pageingstate === 0){
                that.pagesize = val;
                that.requesttemplate()
            }else if(that.pageingstate === 2){
                that.pagesize = val;
                that.seektrade('kindinquire')
            }else{return}
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage = val
            if(that.pageingstate === 0){
                that.requesttemplate()
            }else if(that.pageingstate === 2){
                that.seektrade('kindinquire')
            }else if(that.pageingstate === 3){
                that.pagesize3 = val;
                that.option()
            }else{return}
        },

        // 查看小类
        smallrequest(id){
            let that = this;
            // console.log(that.pageingstate === 1)
            that.pageingstate === 1 ? that.currentPage = 1 : '';
            let data = {current:that.currentPage,size:that.pagesize,templateid:id};
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/templateKind/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> {
                // console.log('模板小类',resp.data.data)
                that.templist = resp.data.data;
                that.total = resp.data.code;
                that.pageingstate = 1
            }).catch( err=> {})
        },

        // 拿到所有的大分类用作添加小分类选项使用，
        async requestselect(){
            let that = this;
            let total = 10,select;
            for(var i=0;i<2;i++){
                let data = {current:1,size:total,level:0};
                let updata = JSON.stringify(data);
                // console.log(updata)
                await axios({
                    method: 'post',
                    url: '/api/kindAll/list',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then(resp=>{
                    // console.log(resp,resp.data.data)
                    if(i === 0){
                        resp.data.code <= 10 ? (
                            that.kindselect = resp.data.data.map((item)=>{
                                return {
                                    id: item['id'],
                                    name: item['name']
                                }
                            }),i=2) : total = resp.data.code;
                    }else{
                        that.kindselect = resp.data.data.map((item)=>{
                            return {
                                id: item['id'],
                                name: item['name']
                            }
                        })
                    }
                }).catch(err=>{})
            }
        },

        //验证状态的取消
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 查询搜索
        seektrade(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                that.pageingstate === 2 ? that.currentPage = 1 : that.pageingstate = 2;
                let data = {current:that.currentPage,size:that.pagesize};
                data[that.kindinquire.select] = that.kindinquire[that.kindinquire.select]
                let updata = JSON.stringify(data);
                axios({
                    method: 'post',
                    url: '/api/template/list',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    // console.log(resp)
                    that.templist = resp.data.data;
                    that.total = resp.data.code;
                    that.pageingstate = 2;
                    this.$message({
                        message: '查找到'+resp.data.data.length+'条相关数据',
                        type: 'success'
                    })
                }).catch( err=> {})
            } else {
                // console.log('error submit!!');
                return false;
            }
            });

        },

        //提交添加的模板
        // updatastaff(){
        //     let data = {current:1,size:10,name:'排球'};
        //     // for(var i in that.tempform){
        //     //     data[i] = that.tempform[i]
        //     // }
        //     let updata = JSON.stringify(data);
        //      axios({
        //         method: 'post',
        //         url: '/api/templateKind/list',
        //         headers: {
        //             'Content-Type': 'application/json',
        //             'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
        //         },
        //         data: updata
        //     }).then( resp=> {
                // console.log(resp)
        //     }).catch( err=> {})
        // },

        // 删除
        async staffdelete(id,key){
            let data = {id:id};
            let updata = JSON.stringify(data);
            await axios({
                method: 'post',
                url: '/api/template/delete',
                headers:{
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then(resp =>{
                // console.log(resp)
                if(resp.data.data === null){
                    this.$message.error('删除失败，模板内还有小类未删除')
                }else{
                    this.$message({
                        message: '模板删除成功，需要在添加新的小类可以点击修改新增',
                        type: 'success'
                    });
                    that.templist.splice(key,1)
                }
            }).catch(err=>{})
        },

        // 删除小类
        templatedelete(id,key){
            let data = {id: id}
            let updata = JSON.stringify(data);
            axios({
                method: 'post',
                url: '/api/templateKind/delete',
                headers:{
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then(resp =>{
                // console.log(resp)
                if(resp.data.data === null){
                    this.$message.error('删除失败，请刷新页面或重新登录')
                }else{
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    that.templist.splice(key,1)
                }
            }).catch(err=>{})
        },

        async requesttoken(){
            let that = this;
            let loguser = JSON.parse(sessionStorage.getItem('updata'))
            let data = {username:loguser.username, password:loguser.password};
            let updata = JSON.stringify(data);
            await axios({
                method: 'post',
                url: '/api/getAuthority/manager',
                headers: { 'Content-Type': 'application/json' },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.token = resp.data.data;
                sessionStorage.setItem('token',JSON.stringify(resp.data.data))
                that.requesttemplate()
                that.requestselect()
            }).catch( err=> {})
        }
    },
    created() {
        this.requesttoken()
    },
    mounted() {},
    beforeCreate() {
        that = this;
    },
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dh_template{
    height: 100%;
}
.dh_s-content{
    height: 100%;
}
/* 查询 */
.dh_sci-form{
    background-color: #ffffff;
    box-shadow: 0 0 2px #4b4b4b;
    border-radius: 5px;
}
/* 列表数据 */
.dh_s-c-list{
    display: flex;
    flex-direction: column;
    height: calc(100% - 91px);
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 2px #4b4b4b;
}
.dh_scl-table{
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-spacing: 0;/*去掉单元格间隙*/
}
.dh_scl-table th{
    background-color: #ececec;
}
.dh_scl-table tbody tr:hover{
    background-color: #ececec;
}
.dh_scl-table th,.dh_scl-table td{
    padding: 10px 0;
    border-left:1px solid #e0e0e0;
    border-top:1px solid #e0e0e0;
}
.show{
    display: inline-block;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    vertical-align: middle;
}
/* 分页 */
.dh_scl-block{
    margin-top: auto;
}

/* 加员工 */
.dh_s-addstaff{
    /* height: 100%; */
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 3px #3d3d3d;
}
.el-form-item__label{
    border-bottom: 1px solid #e7e7e7;
}
.a-l-t-input{
    display: inline-block;
    width: 180px;
}
.el-pagination{
    line-height: normal;
}
</style>
<style>
/* 修改员工信息 */
.el-dialog--center .el-dialog__body{
    padding: 0 30px;
}
.el-dialog__body{
    padding: 0;
}
</style>